<template>
  <el-select
    v-model="selectedValue"
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    :remote-method="remoteSearch"
    :loading="loading"
    @change="handleChange"
    @focus="handleFocus"
    @clear="handleClear"
    clearable
  >
    <el-option
      v-for="item in options"
      :key="item[keyField]"
      :label="item[labelField]"
      :value="item[valueField]"
    />
    <div class="select-footer" v-if="total > 0">
      <div class="total-count">共 {{ total }} 条</div>
      <div class="select-pagination" v-if="total > pageSize">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page.sync="currentPage"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </el-select>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "RemoteSearchSelect",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    apiUrl: {
      type: String,
      required: true,
    },
    // 自定义字段映射
    labelField: {
      type: String,
      default: "label",
    },
    valueField: {
      type: String,
      default: "value",
    },
    keyField: {
      type: String,
      default: "id",
    },
    // 请求参数自定义
    searchParamName: {
      type: String,
      default: "keyword",
    },
    pageParamName: {
      type: String,
      default: "pageNum",
    },
    pageSizeParamName: {
      type: String,
      default: "pageSize",
    },
    // 响应数据结构配置
    responseListField: {
      type: String,
      default: "list",
    },
    responseTotalField: {
      type: String,
      default: "total",
    },
    // 额外的请求参数
    extraParams: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      selectedValue: this.value,
      options: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      keyword: "",
      isFirstFocus: true,
      selectedOption: null,
    };
  },
  created() {
    this.remoteSearch("");
  },
  methods: {
    async remoteSearch(query) {
      this.loading = true;
      this.keyword = query;
      try {
        const params = {
          [this.searchParamName]: query,
          [this.pageParamName]: this.currentPage,
          [this.pageSizeParamName]: this.pageSize,
          ...this.extraParams,
        };
        // 使用配置的响应数据字段
        const responseData = await request({
          url: this.apiUrl,
          method: "post",
          data: params,
        });
        this.options = responseData[this.responseListField] || [];
        this.total = responseData[this.responseTotalField] || 0;
      } catch (error) {
        console.error("搜索出错：", error);
        this.$message.error("搜索失败，请重试");
      } finally {
        this.loading = false;
      }
    },
    handleChange(value) {
      this.selectedOption = this.options.find(
        (item) => item[this.valueField] === value
      );
      this.$emit("input", value);
      this.$emit("change", value);
      this.$emit("select", this.selectedOption);
    },
    handleFocus() {
      // 如果是首次点击或当前没有选项，则执行搜索
      this.remoteSearch(this.keyword);
      this.isFirstFocus = false;
    },
    handleClear() {
      this.selectedValue = "";
      this.keyword = "";
      this.selectedOption = null;
      this.$emit("input", "");
      this.$emit("change", "");
      this.$emit("select", null);
      this.remoteSearch("");
    },
    async handlePageChange(page) {
      this.currentPage = page;
      if (this.keyword) {
        await this.remoteSearch(this.keyword);
      }
    },
  },
  watch: {
    value: {
      handler(newVal) {
        this.selectedValue = newVal;
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
.select-footer {
  padding: 8px;
  border-top: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.total-count {
  color: #909399;
  font-size: 12px;
  padding-left: 8px;
}

:deep(.el-pagination) {
  padding: 0;
  margin-left: 8px;
}
</style>